/*
 * @Description: 包含网络错误处理的scroll组件
 * @Author: yingying.fan
 * @Date: 2019-01-24 10:18:35
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-03-15 18:24:03
 */
<template>
  <div
    ref="mescroll"
    class="mescroll"
  >
    <div
      style="min-height:100%"
      :class="nodata?'data-div':''"
    >
      <slot name="header"></slot>
      <slot v-if="count > 0"></slot>
      <slot
        name="NoDataModule"
        v-if="nodata"
      >
        <ErrorModule
          :errorInfo="noDataText"
          class="no-date-module"
        ></ErrorModule>
      </slot>
      <!-- <slot
        name="NetErrorModule"
        v-if="neterror"
        @click.native="getListWhenNetError"
      ></slot> -->
      <NetErrorModule
        v-if="neterror"
        class="no-date-module"
        @click.native="getListWhenNetError"
      ></NetErrorModule>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import { XBScroll } from 'vue-xb-ui-depot'
import ErrorModule from '@/components/errormodule/ErrorModule'
import NetErrorModule from '@/components/errormodule/NetErrorModule'
export default {
  extends: XBScroll,
  props: {
    up: {
      type: Object,
      default: () => {
        return {
          noMoreSize: 10,
          page: { size: 10 }
        }
      }
    },
    noDataText: {
      type: String,
      default: ''
    },
    // 是否使用底层的下拉刷新
    useNative: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      neterror: false // 网络错误，只有第一页协议数据获取失败才为true
    }
  },
  components: {
    ErrorModule,
    NetErrorModule
  },
  methods: {
    getListWhenNetError() {
      // TODO: 网络错误的时候重新获取一遍数据
      this.mescroll.resetUpScroll()
      this.$emit('refreshWhenNetError')
    },
    upCallback(page) {
      this.getListData(page.num, page.size).then(({ length, count }) => {
        this.nodata = false
        this.neterror = false
        this.count = count || 0
        if (page.num === 1) {
          this.endXBRefresh()
        }
        this.$nextTick(() => {
          this.mescroll.endBySize(length, this.count)
        })
        if (this.count <= 0) {
          this.nodata = true
          this.hideNoMoreHtml()
        }
      }).catch(() => {
        if (page.num === 1) {
          // 第一页获取数据失败时展示无数据
          // this.nodata = true
          // 第一页获取数据失败时展示网络错误
          this.neterror = true
          this.endXBRefresh()
        }
        if (this.count > 0) {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          this.mescroll.endErr()
        } else {
          this.mescroll.endBySize(0, this.count)
        }
      })
    }
  }
}
</script>

<style>
.mescroll {
  overflow-x: hidden;
}
</style>
